<template>  
    <div class="act-wrapper" v-show="!isEmpty">
        <!-- 左侧导航栏 -->
        <ul class="sideNav" >
            <li 
                v-for="(sort,index) in sortList " 
                :key="index"
                @click="indexClick(index)" 
                :class="{
                    active:index == isActiveLi
                }">
                <p>{{sort}}</p>
            </li>
        </ul>

        <!-- 商品展示区 -->
        <ul class="goodsDisplay" >
            <li 
                v-for="good in goodsForShow"
                :key="good.id"

            >
                <ActivityGoodsCard
                    :name="good.title"
                    :priceDay="good.priceDay"
                    :priceMonth="good.priceMonth"
                    :imgSrc="good.contentImages"
                    @click="goGoodsDetail(good)"
                ></ActivityGoodsCard>
            </li>

        </ul>
    </div>

    <el-empty description="请搜索活动（如：婚礼）" v-show="isEmpty" class="empty" />
</template>
    
<script setup >
    import { reactive,ref,computed} from 'vue';
    import ActivityGoodsCard from '@/components/goods/ActivityGoodsCard.vue';
    import {useStore} from 'vuex'
    import {useRouter} from 'vue-router'
    const router = useRouter();

    var isEmpty = computed(()=>{
        if (store.state.goods.actGoodsList.length==0) return true;
    })

    const store = useStore();

    //活动分类
    var sortList = computed(()=>{
        if (isEmpty.value){
            return []
        }
        else return ['礼服','多媒体','装饰','婚车','道具','其他']
    })

    let isActiveLi = ref(0);

    var goodsForShow = computed(()=>{
            return store.state.goods.actGoodsList[isActiveLi.value];
    })

    //跳转商品详情
    function goGoodsDetail(good){
        router.push({
            name:'goodsDetail',
            params:{
                goodsId:good.goodsId,
                userId:good.goodsId,
            }
        })
    }

    //选中活动
    function indexClick(index){
        isActiveLi.value = index;
    }
</script>
    
<style lang="scss" scoped>
    .act-wrapper{
        display: flex;
        ul.sideNav{
            width: 1rem;
            height: 7.21rem;
            overflow-y: scroll;
            >li{
                height: 0.6rem;
                text-align: center;
                p{
                    color:$themeGrey;
                    line-height:0.4rem;
                    font-size: 0.2rem;
                    font-weight: bold;
                }
            }

            li.active{
                p{
                    color:$themeOrange;
                }
            }
        }


        .goodsDisplay{
            width: 3.28rem;
            height: 7.21rem;
            overflow-y: scroll;

            >li{
                margin:0 0 0.4rem 0.2rem;
            }
        }

    }
</style>